<template>
	<view class="content">
		<image :src="store.config.app_logo " class="u-w-300 u-h-300" mode="aspectFill"></image>
		<view class="u-font-32 u-font-bold u-content-color u-m-t-30">{{ store.config.app_name }}</view>
	</view>

	<view class="u-font-28 u-tips-color u-m-tb-50 u-p-lr-60">如需正常使用程序的功能，请点击下方授权登录按钮，打开授权弹窗，并点击允许。</view>

	<view class="u-m-lr-50">
		<!-- #ifdef H5 -->
		<sar-button theme="danger" round @click="wxLogin">
			<text>授权登录</text>
		</sar-button>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<sar-button theme="danger" round open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
			<text>手机号快捷登录</text>
		</sar-button>
		<!-- #endif -->
	</view>
	<sar-toast-agent />
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { getUserInfo, decryptPhone } from '@/api/wxapp';
	import { toast } from 'sard-uniapp';
	import { userLifeDataStore } from '@/store/lifeDataStore';
	// #ifdef H5
	import wx from '@/utils/jwx';
	// #endif
	const store = userLifeDataStore();
	const openid = ref('');

	// 挂载
	onLoad((op : any) : any => {
		// #ifdef H5
		if (op.openid) {
			openid.value = op.openid;
			userInfo();// 获取用户信息
		}
		// #endif
		// #ifdef MP-WEIXIN
		getCode(); // 获取code
		// #endif
	})
	const wxLogin = async () : Promise<any> => {
		wx().wxOauth();
	}
	const userInfo = () : any => {
		uni.showLoading({
			title: '登录中...'
		})
		getUserInfo({
			openid: openid.value
		}).then((res : any) : any => {
			store.setIsLogin(true);
			store.setUserInfo(res.data);
			uni.hideLoading();
			toast.success('登录成功');
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/index/index',
					fail: () : any => {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}
				})
			}, 1500)
		}).catch((err : any) : any => {
			uni.hideLoading();
			toast(err.msg);
		})
	}

	// 微信小程序登录
	const code : any = ref('');
	//获取code
	const getCode = async () : Promise<any> => {
		const tempCode : any = await getLoginCode();
		code.value = tempCode;
	}

	//授权获取手机
	const getPhoneNumber = (e : any) : any => {
		const encryptedData = e.detail.encryptedData
		const iv = e.detail.iv
		if (e.detail.errMsg == "getPhoneNumber:ok") {
			mobileLogin(encryptedData, iv)
		} else {
			toast('请点击允许授权')
		}
	}
	//授权绑定手机号
	const mobileLogin = async (encryptedData : any, iv : any) : Promise<any> => {
		uni.showLoading({
			title: '登录中...'
		});
		let vcode = uni.getStorageSync('vcode') //把vcode从缓存取出
		const loginInfo = {
			code: code.value,
			encrypted_data: encryptedData,
			iv: iv,
			vcode
		}
		decryptPhone(loginInfo).then((res : any) : any => {
			store.setIsLogin(true);
			store.setUserInfo(res.data);
			uni.removeStorageSync('vcode'); //从缓存移除vcode
			uni.hideLoading();
			toast.success('登录成功');
			setTimeout(() => {
				uni.navigateBack();
			}, 1500)
		}).catch((res : any) : any => {
			uni.hideLoading();
			toast(res.msg);
			this.getCode(); //获取code
		})
	}
	const getLoginCode = () : any => {
		return new Promise((resolve : any, reject : any) : any => {
			uni.login({
				provider: 'weixin',
				success: res => {
					resolve(res.code)
				},
				fail: () => {
					uni.hideLoading();
					toast('授权登录失败');
					reject();
				}
			})
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 auto;
		padding: 150rpx 0;
		text-align: center;
	}
</style>